<template>
	<view class="apply">
		<navbar title="申请合作"></navbar>
		
		<view class="top">
			<image class="imgwh" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/apply-top.png" mode=""></image>
		</view>
		
		<view class="main">
			<view class="acea-row row-middle row-between mt20">
				<view class="fc333 fs32">姓名：</view>
				<view>
					<input v-model="real_name" class="input" type="text" placeholder="请输入姓名" placeholder-class="fc999 fs26" />
				</view>
			</view>
			<view class="acea-row row-middle row-between mt30">
				<view class="fc333 fs32">手机号：</view>
				<view>
					<input v-model="phone" class="input" type="text" placeholder="请输入手机号" placeholder-class="fc999 fs26" />
				</view>
			</view>
			<view class="fs32 fc333 mt30">选择合作城市</view>
			<view class="selnav acea-row row-right mt30">
				<view class="sel-item acea-row row-middle row-center" @click="provinceopen">
					<text v-if="provinceName">{{ provinceName }}</text>
					<text v-else>选择省份</text>
					<text class="iconfont icon-xiangxia2"></text>
				</view>
			</view>
			<view class="selnav acea-row row-right mt30">
				<view class="sel-item acea-row row-middle row-center" @click="cityopen">
					<text v-if="cityName">{{ cityName }}</text>
					<text v-else>选择城市</text>
					<text class="iconfont icon-xiangxia2"></text>
				</view>
			</view>
			<view class="fc333 fs32 mt30">备注：</view>
			<view class="mt30">
				<textarea class="text" v-model="mack" placeholder="在此备注..." placeholder-class="fc999 fs26"></textarea>
			</view>
			<view class="button" @click="open">点击申请</view>
		</view>
		
		<uni-popup type="center" ref="popup">
			<view class="frame acea-row row-column row-middle row-around">
				<view class="fs36 fc333 bold">温馨提示</view>
				<view class="fs40 fc333 bold mt30">您确定提交申请合作吗?</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="btn bgccc fc9e" @click="close">取消</view>
					<view class="btn fcwhite bgtheme" @click="confrim">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" ref="province">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择省份</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="provinceclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<scroll-view scroll-y="true" class="scroll-nav">
					<block v-for="(item,index) in provincelist" :key="index">
						<view class="mb30 item fcenter" @click="provinceclick(item)">
							{{ item.name }}
						</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" ref="city">
			<view class="age-nav p30">
				<view class="acea-row row-between-wrapper">
					<view class="fs36 fc333">选择城市</view>
					<view class="iconfont icon-iconcancel0101 fs40 fc333" @click="cityclose"></view>
				</view>
				<view class="bor-bot mt30 mb30"></view>
				<scroll-view scroll-y="true" class="scroll-nav">
					<block v-for="(item,index) in child" :key="index">
						<view class="mb30 item fcenter" @click="cityclick(item)">
							{{ item.name }}
						</view>
					</block>
				</scroll-view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		applyAgent,
		provinceList,
		
	} from '@/api/api.js'
	import navbar from '../../components/navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				provincelist:[],
				child:[],
				provinceName:'',
				cityName:'',
				province_id:'',
				city_id:'',
				mack:'',
				real_name:'',
				phone:'',
				
			};
		},
		onShow() {
			this.getprovince();
		},
		methods:{
			cityclick(item){
				this.cityName = item.name;
				this.city_id = item.city_id;
				this.cityclose();
			},
			cityclose(){
				this.$refs.city.close();
			},
			cityopen(){
				if( !this.provinceName ) return this.$util.Tips({ title : '请先选择省份' })
				this.$refs.city.open();
			},
			provinceclick(item){
				this.provinceName = item.name;
				this.child = item.child;
				this.province_id = item.city_id;
				this.provinceclose();
			},
			provinceopen(){
				this.$refs.province.open();
			},
			provinceclose(){
				this.$refs.province.close();
			},
			getprovince(){
				provinceList().then(res=>{
					this.provincelist = res.data.data;
				})
			},
			confrim(){
				let that = this;
				if( !that.real_name ) return this.$util.Tips({ title : '请填写姓名' })
				if( !that.phone ) return this.$util.Tips({ title : '请填写电话' })
				if( !that.province_id ) return this.$util.Tips({ title : '请选择省份' })
				if( !that.city_id ) return this.$util.Tips({ title : '请选择城市' })
				let data = {
					city_id: that.city_id,
					province_id: that.province_id,
					real_name: that.real_name,
					phone: that.phone,
					mack: that.mack
				}
				applyAgent(data).then(res=>{
					that.$util.Tips({ title: res.msg },()=>{
						uni.navigateTo({
							url: '/pages/home/apply-status'
						})
					})
				}).catch(err=>{
					that.$util.Tips({ title: err })
				})
			
			},
			close(){
				this.$refs.popup.close();
			},
			open(){
				this.$refs.popup.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply{
		
		.scroll-nav{
			width: 100%;
			height: 500rpx;
			white-space: nowrap;
			
			.item{
				display: block;
			}
		}
		
		.age-nav{
			width: 100%;
			min-height: 500rpx;
			background-color: #ffffff;
		}
		
		.top{
			width: 100%;
			height: 316rpx;
			margin-top: 30rpx;
		}
		
		.main{
			width: 690rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: -50rpx auto 0 auto;
			position: relative;
			padding: 30rpx;
			
			.input{
				width: 450rpx;
				height: 80rpx;
				line-height: 80rpx;
				box-sizing: border-box;
				border: 2rpx solid #AFAFAF;
				border-radius: 12rpx;
				padding: 0 30rpx;
			}
			
			.selnav{
				width: 100%;
				
				.sel-item{
					width: 448rpx;
					height: 80rpx;
					background: #E1E1E1;
					border-radius: 12rpx;
					color: #767676;
					font-size: 28rpx;
					
					.icon-xiangxia2{
						color: #767676;
						font-size: 40rpx;
					}
				}
			}
			
			.text{
				width: 100%;
				height: 180rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				border: 2rpx solid #999999;
				padding: 30rpx;
			}

			.button{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 48rpx;
				margin: 50rpx 0;
				background: #6252DF;
				color: #ffffff;
				font-size: 30rpx;
			}
			
		}
		
		.frame{
			width: 660rpx;
			height: 380rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx;
			
			.btn{
				width: 240rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
